<!--suppress ALL -->
<template>
    <div class="page eqmentMsg-page" data-page="eqmentMsg" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="backPageRouter"> <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">设备详情</div>
            <a href="#" class="link" @click="openConfirm">
                <i class="iconfont icon--" id="noAttention_{{getNewId}}" style="font-size: 23px;"></i> <i
                    class="iconfont icon--" id="attention_{{getNewId}}" style="font-size: 23px; display: none;"></i>
            </a>
        </div>
        <div class="page-content ptr-content" @ptr:refresh="refreshEqmentMsg" style="padding-bottom: 80px;">
            <div class="ptr-preloader">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <a class="eqmentMsg-status dealing" id="eqmentMsg-status-todo_{{getNewId}}"
                style="background: #f8b728;"><span>设施警情未处理</span><em>立即处理</em></a> <a class="eqmentMsg-status dealing"
                id="eqmentMsg-status-dealing_{{getNewId}}"><span>设施警情由某某处理</span></a>
            <a class="eqmentMsg-status todoDeal" id="eqmentMsg-status-todoDeal_{{getNewId}}"
                style="background: #509dff"><span>设施警情由我处理</span><em>立即处理</em></a> <a class="eqmentMsg-status dealed"
                id="eqmentMsg-status-dealed_{{getNewId}}"><span>设施警情已处理</span><em>查看处理详情</em></a>
            <div class="list media-list">
                <ul>
                    <li>
                        <div
                            style="border: 1px solid rgba(231, 231, 231, 1); text-align: center; padding: 20px 0; margin: 0 16px;">
                            <img src="{{staticPath}}img/mine/defEqIcon.png" class="myicon" id="decter-icon_{{getNewId}}"
                                style="width: 40%; height: 100%;">
                        </div> <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title-row" style="padding-right: 0;">
                                    <div class="item-title" style="white-space: normal;">
                                        <span id="decterType-eqmentMsg_{{getNewId}}"></span> <span class="decter-name"
                                            id="decter-name-eqmentMsg_{{getNewId}}"></span>
                                    </div>
                                </div>
                                <div class="item-subtitle decter-mesage" id="decter-address_{{getNewId}}"
                                    style="white-space: normal;"></div>
                                <div class="item-text">
                                    <span class="decter-mesage">持续时间</span> <span class="decter-key-mesage"
                                        id="decter-continue-time-equipment_{{getNewId}}"></span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="eqmentMsg-status-content" id="eqmentMsgStatus_{{getNewId}}"
                style="border-top: 5px solid #f4f4f4; border-bottom: 5px solid #f4f4f4;">
            </div>
            <div class="list relation-decter-content" id="relation-decter-content_{{getNewId}}">
                <ul id="relation-decter_{{getNewId}}">

                </ul>
            </div>

            <div class="revise" id="revise_{{getNewId}}">

            </div>
            <div class="forbidden">
                <span class="left-forbidden">梯控被触发，正在执行中</span>
                <span class="forbidden-btn" id="forbiddenBan">禁用</span>
            </div>
            <div class="showMid"></div>
            <div class="line-hr" id="relation-decter-hr_{{getNewId}}"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title"><a href="#" class="item-link item-content">
                            <div class="item-inner" style="background-image: none;">
                                <div class="item-title">
                                    <span>基本信息</span>
                                </div>
                            </div>
                        </a></li>
                    <li class="decter-block-basic-message"><a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">所属单位</div>
                                <div class="item-after" id="msg-1_{{getNewId}}">-</div>
                            </div>
                        </a></li>
                    <li class="decter-block-basic-message">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">复位方式</div>
                                <div class="item-after-history" id="policeHistory_rest_type{{getNewId}}">-</div>
                                <i class="iconfont icon-question" @click="policeHistory_rest_typeFun"></i>
                            </div>
                        </a>
                    </li>
                    <li class="decter-block-basic-message"><a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">所属建筑</div>
                                <div class="item-after" id="msg-2_{{getNewId}}">-</div>
                            </div>
                        </a></li>
                    <li class="decter-block-basic-message"><a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">所属系统</div>
                                <div class="item-after" id="msg-3_{{getNewId}}">-</div>
                            </div>
                        </a></li>
                    <li class="decter-block-basic-message"><a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">设备厂家</div>
                                <div class="item-after" id="msg-4_{{getNewId}}">-</div>
                            </div>
                        </a></li>
                    <li class="decter-block-basic-message"><a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">入网时间</div>
                                <div class="item-after" id="msg-5_{{getNewId}}">-</div>
                            </div>
                        </a></li>
                    <li class="decter-block-basic-message message-Remarks" id="message-Remarks_{{getNewId}}"><a href="#"
                            class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">备注</div>
                                <div class="item-after" id="msg-6_{{getNewId}}">-</div>
                            </div>
                        </a></li>
                </ul>
            </div>
            <div class="line-hr"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title"><a href="#" class="item-link item-content"
                            id="decter-video_{{getNewId}}">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span>附近监控</span>
                                </div>
                                <div class="item-after" id="decter-video-num_{{getNewId}}">无</div>
                            </div>
                        </a></li>
                </ul>
            </div>
            <div class="line-hr"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title"><a href="#" class="item-link item-content"
                            id="decter-historyPolice_{{getNewId}}">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span>历史记录</span>
                                </div>
                            </div>
                        </a></li>
                </ul>
            </div>
            <div class="line-hr"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title"><a href="#" class="item-link item-content"
                            id="fmapHerf_{{getNewId}}">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span>室内定位</span>
                                </div>
                            </div>
                        </a></li>
                </ul>
            </div>
            <!-- 修改弹窗 -->
            <div class='popup popup-about popup-about-ban' id="popup-about">

            </div>
            <div class="line-hr"></div>
            <div class="list" style="margin-bottom: 20px;">
                <ul>
                    <li class="decter-block-title"><a href="#" class="item-link item-content">
                            <div class="item-inner" style="background: none">
                                <div class="item-title">
                                    <span>最近24小时状态变化</span>
                                </div>
                            </div>
                        </a></li>
                    <li>
                        <!-- 是模拟量 -->
                        <div class="decter-history-chart" id="historyChart-waper_{{getNewId}}"></div> <!-- 不是模拟量 -->
                        <div class="every-type-chart-wrap " id="historyChartNoData-wrap_{{getNewId}}"
                            style="padding: 20px">
                            <p class="chat-title">状态变化</p>
                            <div class="decter-history-chart decterHasAnalogChart-style"
                                id="historyChartNoData-waper_{{getNewId}}"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="line-hr"></div>
        </div>
    </div>
</template>
<style>
    .decter-table-content {
        width: 85%;
        margin: auto;
        margin: 20px auto;
        border-collapse: collapse;
        text-align: center;
        display: none;
    }

    .hide {
        display: none;
    }

    .popup-about-ban {
        position: fixed;
        height: 80%;
        top: 20% !important;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 0 20px;
    }

    .forbidden {
        height: 40px;
        background: rgb(254, 248, 234);
        position: relative;
        margin: 0 10px;
        border-radius: 6px;
        padding: 0 10px;
    }

    .revise-btn {
        background: rgb(224, 119, 98);
        padding: 4px 14px;
        color: #fff;
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 12px;
        border-radius: 6px;
    }

    .revise {
        height: 40px;
        background: rgb(252, 241, 239);
        position: relative;
        margin: 0 10px;
        border-radius: 6px;
        padding: 0 10px;
    }

    .forbidden-btn {
        background: rgb(243, 188, 50);
        padding: 4px 14px;
        color: #fff;
        position: absolute;
        right: 10px;
        top: 8px;
        font-size: 12px;
        border-radius: 6px;
    }

    .left-forbidden {
        line-height: 40px;
        color: #333;
        font-size: 12px;
    }

    .decter-table-content td {
        height: 30px;
        /*border: 1px solid rgba(221, 221, 221, 0.5);*/
    }

    .message-Remarks {
        display: none;
    }

    .option-list {
        height: 40px;
        line-height: 39px;
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        margin: 15px 0;
        font-size: 14px;
    }

    .option-list.on {
        border: 1px solid #2471ca;
        color: #2471ca;
    }

    .option-list .dot.active {
        background: #2471ca;
    }

    .option-list .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 10px;
        float: left;
        margin-top: 12px;
        border: 1px solid rgba(169, 169, 169, 0.6);
        margin-left: 20px;
    }

    .popup-textarea {
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        width: 100%;
        height: 16%;
        padding: 4px 8px;
        margin-top: 4px;
    }

    .bottom-box {
        position: absolute;
        bottom: 0;
        display: inline-flex;
        width: calc(100% - 40px);
        justify-content: center;
        top: calc(100% - 40px);
    }

    .bottom-box:before {
        content: '';
        position: absolute;
        left: -20px;
        top: 0;
        bottom: auto;
        right: auto;
        height: 1px;
        width: 100vw;
        background-color: #d0d0d0;
    }

    .cancel {
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-right: 1px solid #d0d0d0;
        font-weight: bold;
    }

    .confirm {
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #2471ca;
        font-weight: bold;
    }

    .showMid {
        height: 10px;
        background: #fff;
    }
</style>
<script>
    return {
        data: function () {
            return {
                id: this.$route.params.id,
                organizationId: 0,
                isConcern: 0,
                videoBean: {},//播放视频信息
                //组合式电气火灾探测器
                dataTypeIdArr: ["30", "31", "32", "33", "34", "35", "36", "37", "38", "39"],
                getNewId: (new Date()).getTime(),
                fireSTypes: "",
                fcFacilitiesId: '',
                reviseArr: [{ name: '取消禁用', code: 0 }, { name: '禁用10分钟', code: 1 }, { name: '禁用1小时', code: 2 }, { name: '禁用1天', code: 3 }, { name: '永久禁用', code: 4 },],
                ladderControl: [{ name: '禁用10分钟', code: 0 }, { name: '禁用1小时', code: 1 }, { name: '禁用1天', code: 2 }, { name: '永久禁用', code: 3 },],
            }
        },
        methods: {
            // ----------------------------- canvas 画框开始 ----------------------------
            // 报警图片加载完毕
            vanimageLoad() {
                if(!this.detailValie) return
                var self = this;
                let Kline = document.getElementById('imagetoAlarm')
                self.imgcanvasW = Kline.clientWidth
                self.imgcanvasH = Kline.clientHeight
                let resultRegion = self.detailValie.picAlarmRegion;
                if (resultRegion) {
                    resultRegion = JSON.parse(resultRegion);
                    // 图片红框数组
                    self.frameArr = []
                    self.frameArr.push(JSON.parse(resultRegion.frameInfo));
                    var regionArr=[]
                    if(resultRegion.region){
                        regionArr=resultRegion.region.split(';').map(n=>{
                            return JSON.parse(n)
                        })
                    }
                    // 图片原始大小
                    self.picObj = resultRegion.imageInfo;
                    self.picObj.width = parseInt(self.picObj.width);
                    self.picObj.height = parseInt(self.picObj.height);
                    self.doDrawPic(self.frameArr,regionArr)
                }
            },
            // 画canvas图片 （功能：获取vanvas画布 and 画红框）
            doDrawPic: function (value,regionArr) {
                // 以下代码展示的视图层级是： 1。最低层是image   2.image上面覆盖一层透明的没有绘制的空的vanvas   3.vanvas上面是红框
                let self = this
                //  获取canvas
                self.canvas = document.getElementById("policeHistoryDetail_scaleImg_")
                //  由于弹窗，确保已获取到
                self.ctx = self.canvas.getContext('2d')
                //  绘制图片 （注意：这里不必把canvas绘制出来，有一个底图image显示就够了）
                // var img=document.getElementById('imagetoAlarm') 
                let img = document.getElementById('imagetoAlarm');
                img.src = self.picObj.pic;
                var imgWidth, imgHeight;
                var w = self.picObj.width / 2
                img.onload = () => {

                    imgWidth = self.picObj.width;
                    imgHeight = self.picObj.height;

                    // 压缩图片大小
                    if (Math.max(imgWidth, imgHeight) > w) {
                        if (imgWidth > imgHeight) {
                            self.canvas.width = w;
                            self.canvas.height = w * imgHeight / imgWidth;
                        } else {
                            self.canvas.height = w;
                            self.canvas.width = w * imgWidth / imgHeight;
                        }
                    } else {
                        self.canvas.width = imgWidth;
                        self.canvas.height = imgHeight;
                    }
                    self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
                    // var ctx = canvas.getContext('2d');
                    self.ctx.drawImage(img, 0, 0, self.canvas.width, self.canvas.height);
                    regionArr.forEach(n=>{
                        self.drawRegion(n)
                    })
                    // 在canvas上绘制红框
                    self.drawRecRed(value)
                }
            },
            // 画红框
            drawRecRed(value) {
                if (value) {
                    let self = this
                    // BiLSizeW  BiLSizeW 图片分辨率的比例   因为红框标注是1920*1080下的大小，不适合app，我需要通过分辨率转一下
                    // this.picObj.width this.picObj.height 原图片大小1920*1080
                    // const BiLSizeW = self.imgcanvasW / self.picObj.width
                    // const BiLSizeH = self.imgcanvasH / self.picObj.height

                    // 绘制矩形上面的文字
                    self.ctx.strokeStyle = 'red'
                    self.ctx.lineWidth = 2
                    self.ctx.font = "30px Georgia";
                    self.ctx.fillStyle = 'red'
                    // 循环判断有几个红框  
                    for (let i = 0; i < value[0].length; i++) {
                        let x = (value[0][i].x / 2 || 0)
                        let y = (value[0][i].y / 2 || 0)
                        let w = (value[0][i].w / 2 || 0)
                        let h = (value[0][i].h / 2 || 0)
                        if (value[0][i].x / 2 === undefined) {

                            // a.如果没有宽高，则只在左上角显示类型
                            x = 15;
                            y = 40;
                            y = y < 37.5 ? 37.5 : y;
                        } else {
                            // 绘制矩形
                            self.ctx.strokeRect(
                                x, // 红框x
                                y, // 红框y
                                w, // 红框w
                                h // 红框h
                            );
                            // c. 文字+图像，文字超过顶，文字放到框下方
                            if (y < 30) {
                                y = y + h + 30
                            }
                            // b. 文字+图像，默认文字在框上
                            else {
                                y -= 12.5
                            }
                            // d. 文字+图像，文字超过右侧，文字右对齐 
                            let textW = (value[0][i].typeName || '').length * 30
                            let rDistance = self.canvas.width - x
                            if (rDistance < textW) {
                                x = x + w - textW
                            }
                        }
                        // 如果没有宽高，则只在左上角显示类型
                        self.ctx.fillText(
                            value[0][i].typeName || '', //文字name
                            x, // 文字x轴
                            y // 文字y轴
                        )
                    }
                    self.image_A = self.canvas.toDataURL("image/png", 0.5)
                    common.loading(0);
                }
            },
            // 画蓝框区域
            drawRegion(arr,ctxProp='ctx') {
                var self=this
                var ctx=self[ctxProp]
                if (!arr || arr.length == 0) return
                ctx.strokeStyle = 'blue'
                ctx.lineWidth = 3
                arr.forEach((item, i) => {
                    let x = (item.x || 0) /2
                    let y = (item.y || 0) /2
                    if (i == 0) {
                        ctx.moveTo(x, y)
                    } else {
                        ctx.lineTo(x, y)
                        if (i == arr.length - 1) {
                            ctx.lineTo(arr[0].x/2, arr[0].y/2)
                        }
                    }
                })
                ctx.stroke();
            },
            // 复位图片加载完毕
            vanimageLoadReset() {
                if(!this.detailValie) return
                var self = this;
                let Kline = document.getElementById('imagetoReset')
                self.imgcanvasW_R = Kline.clientWidth
                self.imgcanvasH_R = Kline.clientHeight
                let resultRegion = self.detailValie.picResetRegion;
                if (resultRegion) {
                    resultRegion = JSON.parse(resultRegion);
                    // 图片红框数组
                    self.frameArr_R = []
                    self.frameArr_R.push(JSON.parse(resultRegion.frameInfo));
                    var regionArr=[]
                    if(resultRegion.region){
                        regionArr=resultRegion.region.split(';').map(n=>{
                            return JSON.parse(n)
                        })
                    }
                    // 图片原始大小
                    self.picObj_R = resultRegion.imageInfo;
                    self.picObj_R.width = parseInt(self.picObj_R.width);
                    self.picObj_R.height = parseInt(self.picObj_R.height);
                    self.doDrawPicReset(self.frameArr_R,regionArr)
                }
            },
            // 画canvas图片 （功能：获取vanvas画布 and 画红框）
            doDrawPicReset: function (value,regionArr) {
                // 以下代码展示的视图层级是： 1。最低层是image   2.image上面覆盖一层透明的没有绘制的空的vanvas   3.vanvas上面是红框
                let self = this
                //  获取canvas
                self.canvas_R = document.getElementById("policeHistoryDetail_scaleImgReset_")
                //  由于弹窗，确保已获取到
                self.ctx_R = self.canvas_R.getContext('2d')
                //  绘制图片 （注意：这里不必把canvas绘制出来，有一个底图image显示就够了）
                // var img=document.getElementById('imagetoReset') 
                // self.ctx_R.drawImage(img, 0, 0, self.imgcanvasW_R, self.imgcanvasH_R) 
                // // 在canvas上绘制红框
                // self.drawRecRedReset(value)

                let img = document.getElementById('imagetoReset');
                img.src = self.picObj_R.pic;
                var imgWidth, imgHeight;
                var w = self.picObj_R.width / 2
                img.onload = () => {
                    imgWidth = self.picObj_R.width;
                    imgHeight = self.picObj_R.height;

                    // 压缩图片大小
                    if (Math.max(imgWidth, imgHeight) > w) {
                        if (imgWidth > imgHeight) {
                            self.canvas_R.width = w;
                            self.canvas_R.height = w * imgHeight / imgWidth;
                        } else {
                            self.canvas_R.height = w;
                            self.canvas_R.width = w * imgWidth / imgHeight;
                        }
                    } else {
                        self.canvas_R.width = imgWidth;
                        self.canvas_R.height = imgHeight;
                    }
                    self.ctx_R.clearRect(0, 0, self.canvas_R.width, self.canvas_R.height);
                    // var ctx = canvas.getContext('2d');
                    self.ctx_R.drawImage(img, 0, 0, self.canvas_R.width, self.canvas_R.height);
                    regionArr.forEach(n=>{
                        self.drawRegion(n,'ctx_R')
                    })
                    // 在canvas上绘制红框
                    self.drawRecRedReset(value)
                }
            },
            // 画红框
            drawRecRedReset(value) {
                if (value) {
                    let self = this
                    // BiLSizeW  BiLSizeW 图片分辨率的比例   因为红框标注是1920*1080下的大小，不适合app，我需要通过分辨率转一下
                    // this.picObj.width this.picObj.height 原图片大小1920*1080
                    // const BiLSizeW = self.imgcanvasW_R / self.picObj_R.width
                    // const BiLSizeH = self.imgcanvasH_R / self.picObj_R.height

                    // 绘制矩形上面的文字
                    self.ctx_R.strokeStyle = 'red'
                    self.ctx_R.lineWidth = 2
                    self.ctx_R.font = "30px Georgia";
                    self.ctx_R.fillStyle = 'red'
                    // 循环判断有几个红框  
                    for (let i = 0; i < value[0].length; i++) {
                        let x = (value[0][i].x / 2 || 0)
                        let y = (value[0][i].y / 2 || 0)
                        let w = (value[0][i].w / 2 || 0)
                        let h = (value[0][i].h / 2 || 0)
                        if (value[0][i].x / 2 === undefined) {

                            // 如果没有宽高，则只在左上角显示类型
                            x = 15;
                            y = 40;
                            y = y < 37.5 ? 37.5 : y;
                        } else {
                            // 绘制矩形
                            self.ctx_R.strokeRect(
                                x, // 红框x
                                y, // 红框y
                                w, // 红框w
                                h // 红框h
                            );
                            // c. 文字+图像，文字超过顶，文字放到框下方
                            if (y < 30) {
                                y = y + h + 30
                            }
                            // b. 文字+图像，默认文字在框上
                            else {
                                y -= 12.5
                            }
                            // d. 文字+图像，文字超过右侧，文字右对齐 
                            let textW = (value[0][i].typeName || '').length * 30
                            let rDistance = self.canvas_R.width - x
                            if (rDistance < textW) {
                                x = x + w - textW
                            }
                        }
                        // 如果没有宽高，则只在左上角显示类型
                        self.ctx_R.fillText(
                            value[0][i].typeName || '', //文字name
                            x, // 文字x轴
                            y // 文字y轴
                        )
                    }
                    self.image_R = self.canvas_R.toDataURL("image/png", 0.5)
                    common.loading(0);
                }
            },
            // ----------------------------- canvas 画框结束 ----------------------------
            backToRefresh: function () {
                this.getequipmentMsg()
            },
            //复位方式弹窗
            policeHistory_rest_typeFun: function () {
                let html = `
                <div class="popup org-popup" style="height: 66% !important">
                    <div class="rdsp-org-popup">
                        <div class="rdsp-org-popup-top">
                            <span style="font-size:16px;color: #000;">复位方式</span>
                            <div class="rdsp-org-list-tags" id="orgRecord_list">
                                <div style="margin-bottom:20px">复位：设备从警情状态恢复到正常状态。复位方式包含自复位和处理后复位</div>
                                <div style="margin-bottom:20px">自复位：设备是否复位取决于设备现场是否复位。标准的设备都是这种</div>
                                <div style="margin-bottom:20px">处理后复位：因为硬件不提供复位信息，所以在人工对警情处理后，系统默认复位。这种情况下，系统展示设备状态可能与实际的设备状态不符，请注意</div>
                                <div>您可以根据设备的实际复位逻辑，通过【接警席==》系统设置==》物联设备维护】来修改复位方式。</div>
                            </div>
                        </div>
                        
                        <div class="initials"><ul><li></li></ul></div>
                    </div>
                </div>`;

                creatNewPopup(html, function () { })
            },
            //下拉刷新
            refreshEqmentMsg: function (e, done) {
                var self = this;
                var $ = self.$$;
                if (done && e) {
                    setTimeout(function () {
                        self.getequipmentMsg();
                        done();
                    }, 1000);
                }
            },
            //获取详情
            getequipmentMsg: function () {
                var self = this;
                jQuery('#revise_' + self.getNewId).hide()
                jQuery('.forbidden').hide()
                jQuery('.showMid').hide()
                Dao.equipmentMsg({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    fcfId: self.id * 1
                }, function (data) {
                    if (data) {
                        self.fireSTypes = data.fireSTypes
                        // self.fcFacilitiesId = data.fcFacilitiesId
                        if (JSON.parse(localStorage.getItem("equipment_material"))) {
                            let alarming = JSON.parse(localStorage.getItem("equipment_material"))
                            if (data.isConcern) {
                                alarming.isConcern = data.isConcern
                            }
                            if (data.recordsInfo) {
                                alarming.handleStatus = data.recordsInfo.handlerStatus
                            }
                            localStorage.setItem("equipment_material", JSON.stringify(alarming))
                        }
                        //处理状态
                        $("#topChartContain_" + self.getNewId).empty();
                        let eqmentMsg_handlerStatus = " ";
                        let eqmentMsg_handlerAccoun = " ";
                        $("#eqmentMsg-status-todo_" + self.getNewId).hide();
                        $("#eqmentMsg-status-dealing_" + self.getNewId).hide();
                        $("#eqmentMsg-status-todoDeal_" + self.getNewId).hide();
                        $("#eqmentMsg-status-dealed_" + self.getNewId).hide();
                        if (data.recordsInfo) {
                            eqmentMsg_handlerStatus = data.recordsInfo.handlerStatus;
                            eqmentMsg_handlerAccount = data.recordsInfo.handlerAccount;
                            if (eqmentMsg_handlerStatus === -1) {
                                $("#eqmentMsg-status-todo_" + self.getNewId).show();
                                $("#eqmentMsg-status-todo_" + self.getNewId).attr('href', '/immediateAtten/' + data.recordsInfo.id + `/` + moment(data.recordsInfo.createTime).format("YYYY-MM-DD HH:mm:ss") + '/' + data.recordsInfo.handlerStatus
                                    + '/' + data.recordsInfo.organizationId + '/' + self.fireSTypes + `/` + data.recordsInfo.fcFacilitiesId + `/`);
                            } else if (eqmentMsg_handlerStatus === 1) {
                                $("#eqmentMsg-status-dealed_" + self.getNewId).show();
                                $("#eqmentMsg-status-dealed_" + self.getNewId).attr('href', '/policeHistoryDetail/' + data.recordsInfo.fcFacilitiesId + `/` + data.recordsInfo.id + `/` + moment(data.recordsInfo.createTime).format("YYYY-MM-DD HH:mm:ss") + '/');
                            } else if (eqmentMsg_handlerStatus === 2) {
                                if (userInfor.accountName === eqmentMsg_handlerAccount) {
                                    $("#eqmentMsg-status-todoDeal_" + self.getNewId).show();
                                    $("#eqmentMsg-status-todoDeal_" + self.getNewId).attr('href', '/immediateAtten/' + data.recordsInfo.id + `/` + moment(data.recordsInfo.createTime).format("YYYY-MM-DD HH:mm:ss") + '/' + data.recordsInfo.handlerStatus
                                        + '/' + data.recordsInfo.organizationId + '/' + self.fireSTypes + `/` + data.recordsInfo.fcFacilitiesId + `/`);
                                } else {
                                    $("#eqmentMsg-status-dealing_" + self.getNewId).show().empty().append('设施警情由' + data.recordsInfo.handlerAccountName + '处理');
                                }

                            } else {
                                $("#eqmentMsg-status-todo_" + self.getNewId).hide();
                                $("#eqmentMsg-status-dealing_" + self.getNewId).hide();
                                $("#eqmentMsg-status-todoDeal_" + self.getNewId).hide();
                                $("#eqmentMsg-status-dealed_" + self.getNewId).hide();
                            }
                        }
                        //关注信息
                        self.isConcern = data.isConcern;
                        if (data.isConcern == 1) {
                            $("#noAttention_" + self.getNewId).hide();
                            $("#attention_" + self.getNewId).css("color", "red");
                            $("#attention_" + self.getNewId).show();
                        }
                        //头部信息
                        if (data.icon) {
                            $("#decter-icon_" + self.getNewId).attr('src', picDecterNo(JSON.parse(data.icon).detailIcon));
                        } else {
                            $("#decter-icon_" + self.getNewId).attr('src', picDecterNo());
                        }
                        $("#decter-name-eqmentMsg_" + self.getNewId).html(common.transNullundefinedToline(data.fcfName));
                        $("#decterType-eqmentMsg_" + self.getNewId).html(transFireIcon(data.fireTType));
                        $("#decter-address_" + self.getNewId).html(common.transNullundefinedToline(data.location));
                        //持续时间
                        if (data.durationTimeStr) {
                            var stillTimeArr = ["年", "月", "周", "天", "小时", "分钟", "秒"];
                            for (var m = 0; m < stillTimeArr.length; m++) {
                                var stillTime = data.durationTimeStr.split(stillTimeArr[m]);
                                if (stillTime.length > 1) {
                                    $("#decter-continue-time-equipment_" + self.getNewId).css("color", transFireColor(data.fireTType)).html(stillTime[0] + stillTimeArr[m]);
                                    break;
                                }
                            }
                        } else {
                            $("#decter-continue-time-equipment_" + self.getNewId).css("color", transFireColor(data.fireTType)).html(0);
                        }

                        //基本信息
                        if (data.resetMode == 0) {
                            jQuery("#policeHistory_rest_type" + self.getNewId).html('自复位')
                        } else {
                            jQuery("#policeHistory_rest_type" + self.getNewId).html('手动处理复位')
                        }
                        $("#msg-1_" + self.getNewId).html(common.transNullundefinedToline(data.shortName));
                        $("#msg-2_" + self.getNewId).html(common.transNullundefinedToline(data.fbsName));
                        $("#msg-3_" + self.getNewId).html(common.transNullundefinedToline(data.systemName));
                        $("#msg-4_" + self.getNewId).html(common.transNullundefinedToline(data.producerName));
                        $("#msg-5_" + self.getNewId).html(common.transNullundefinedToline((data.facsCreateTime)));
                        let _remarks = data.remarks;//临时存放消防设施关联的联系人联系方式
                        if (_remarks && _remarks.replace(/[^0-9]/ig, "").length > 0) {
                            let _tel = _remarks.replace(/[^0-9]/ig, "");
                            $("#message-Remarks_" + self.getNewId).show();
                            $("#msg-6_" + self.getNewId).empty().html(
                                `<a href="tel:` + _tel + `" onclick="window.location='tel:` + _tel + `'">` + _remarks + `</a>`
                            );
                        } else {
                            $("#message-Remarks_" + self.getNewId).hide();
                        }
                        //室内定位
                        $("#fmapHerf_" + self.getNewId).attr("href", "/showLayerOrFmap/" + self.id + "/");
                        //历史记录列表
                        $("#decter-historyPolice_" + self.getNewId).attr('href', '/historyPolice/' + data.fcfId + '/');
                        /*$("#eqmentMsg-status-dealed").attr('href', '/historyPolice/' + data.fcfId + '/');*/
                        //app.router.navigate("/policeHistoryDetail/"+data.fcFacilitiesId+"/"+data.id+"/"+ data.createTime+"/");/
                        /*---处理图表-----------------------------------------------------------------*/
                        if (data.hasAnalog > 0) {
                            $("#historyChartNoData-wrap_" + self.getNewId).hide();//无模拟量 状态变化
                            $("#historyChart-waper_" + self.getNewId).empty().show();//有模拟量
                            self.drawHasAnalogHistoryChart(data.fcfId);//24小时状态变化 有模拟量
                            if (data.hasAnalog === 1) {//模拟量
                                $("#historyChartNoData-wrap_" + self.getNewId).hide();
                                self.showVedioAnalysisAndnoAlong(data);//视频分析 && 不是模拟量 
                            } else if (data.hasAnalog === 2) {//模拟量+非模拟量
                                $("#historyChartNoData-wrap_" + self.getNewId).show();
                                self.drawNoAnalogChart(data.fcfId);
                                self.showVedioAnalysisAndnoAlong(data);
                            } else {
                                /*  $(".historyChartNoData-wrap").show(); */
                                $("#historyChart-waper_" + self.getNewId).empty().show().html(`<div><img  style="width: 283px;display:block;margin:12px auto 20px auto" src="` + listNoDataPic() + `"></div>`);
                            }

                        } else {
                            $("#historyChart-waper_" + self.getNewId).hide();
                            // $(".historyChartNoData-waper").empty().show();
                            self.drawNoAnalogChart(data.fcfId);
                            self.showVedioAnalysisAndnoAlong(data);
                        }
                        //关联的其他监测设施
                        if (data.relateFcfList.length > 0) {
                            $("#relation-decter-hr_" + self.getNewId).show();
                            $("#relation-decter-content_" + self.getNewId).show();
                            $("#relation-decter_" + self.getNewId).empty();
                            for (var i = 0; i < data.relateFcfList.length; i++) {
                                //关联监测设施
                                $("#relateDector_" + self.getNewId).attr('href', '' + + '');
                                $("#relation-decter_" + self.getNewId).append(`
                            <li class="decter-block-title">
                                <a href="/relateEqmentMsg/`+ data.relateFcfList[i].fcfId + `/" class="item-link item-content">
                                    <div class="item-inner">
                                        <div class="item-title">
                                            <span>关联其他设施</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <div >
                                    <p class="chat-title" style="border-left: 0px;font-size:16px;">`+ transFireIcon(data.fireTType) + ` ` + common.transNullundefinedToline(data.relateFcfList[i].fcfName) + `</p>
                                </div>
                            </li>`);
                            }
                        } else {
                            $("#relation-decter-content_" + self.getNewId).hide();
                        }
                        //修改样式
                        jQuery('.popup').css("top", '30%')
                        // 添加dom
                        if (data.disableEndTimeStr) {
                            jQuery('#revise_' + self.getNewId).html("<span class='left-forbidden'>梯控已禁用，有效期到" + data.disableEndTimeStr + "</span><span class='revise-btn' id='revise_btn'>修改</span>")
                        } else {
                            jQuery('#revise_' + self.getNewId).html("<span class='left-forbidden'>梯控已禁用，永久禁用</span><span class='revise-btn' id='revise_btn'>修改</span>")
                        }
                        //添加弹框dom
                        let item = ''
                        $("#popup-about").empty()
                        if (data.elevatorStatus == 3) {//禁用
                            for (var i = 0; i < self.reviseArr.length; i++) {
                                if (i == 1) {
                                    item = `<div class="option-list ladder_control_ban on" value=` + self.reviseArr[i].code + `>
                                    <div class="dot active"></div> 
                                    <div class="text">`+ self.reviseArr[i].name + `</div>
                                </div>`
                                } else {
                                    item = `<div class="option-list ladder_control_ban" value=` + self.reviseArr[i].code + `>
                                    <div class="dot"></div> 
                                    <div class="text">`+ self.reviseArr[i].name + `</div>
                                </div>`
                                }
                                $("#popup-about").append(item);
                            };
                            jQuery('#revise_' + self.getNewId).show()
                            jQuery('.forbidden').hide()
                            jQuery('.showMid').show()
                        } else if (data.elevatorStatus == 2) {//触发
                            for (var i = 0; i < self.ladderControl.length; i++) {
                                if (i == 0) {
                                    item = `<div class="option-list ladder_control_ban on" value=` + self.ladderControl[i].code + `>
                                    <div class="dot active"></div> 
                                    <div class="text">`+ self.ladderControl[i].name + `</div>
                                </div>`
                                } else {
                                    item = `<div class="option-list ladder_control_ban" value=` + self.ladderControl[i].code + `>
                                    <div class="dot"></div> 
                                    <div class="text">`+ self.ladderControl[i].name + `</div>
                                </div>`
                                }
                                $("#popup-about").append(item);
                            };
                            jQuery('#revise_' + self.getNewId).hide()
                            jQuery('.forbidden').show()
                            jQuery('.showMid').show()
                        } else {
                            jQuery('#revise_' + self.getNewId).hide()
                            jQuery('.forbidden').hide()
                            jQuery('.showMid').hide()
                        }
                        $("#popup-about").append(`<p>禁用原因</p>
                    <textarea placeholder="请说明" class="popup-textarea" ></textarea>
                    <div class="bottom-box"><div class="cancel">取消</div><div class="confirm">确认</div></div>`)
                        //梯控按钮

                        self.getIsLadder(data)
                        //附近监控
                        self.findVedioNum(data.fcfId);
                    }
                    common.loading(0);
                });
            },
            //梯控
            getIsLadder: function (data) {
                var self = this;
                var checkTab = 0
                $('#revise_btn').on('click', function () {
                    checkTab = 1
                    app.popup.open('#popup-about');
                })

                $('#forbiddenBan').on('click', function () {
                    checkTab = 0
                    app.popup.open('#popup-about');
                })
                $("#popup-about").on('click', '.ladder_control_ban', function (event) {
                    $(".ladder_control_ban").removeClass('on');
                    $(".ladder_control_ban .dot").removeClass("active");
                    $(this).addClass('on');
                    $(this).find(".dot").addClass("active");
                    checkTab = $(this).attr('value')
                });
                //取消
                $('#popup-about').off('click').click('.cancel', function () {
                    app.popup.close('#popup-about');
                })
                //确认
                var bizId = data.bizId
                $('#popup-about').find('.confirm').off('click').on('click', function () {
                    let times = ''
                    let operCodes = 1
                    if (data.elevatorStatus == 2) {
                        if (checkTab == 0) {
                            times = '600'
                        } else if (checkTab == 1) {
                            times = '3600'
                        } else if (checkTab == 2) {
                            times = '86400'
                        } else if (checkTab == 3) {
                            times = '-1'
                        }
                        Dao.updateElevatorCon({
                            dataType: 1,
                            bizIds: bizId,
                            operCode: 1,
                            time: times,
                            remark: $('.popup-textarea').val(),
                            userName: userInfor.accountName
                        }, function (res) {
                            app.popup.close('#popup-about');
                            setTimeout(function () {
                                self.getequipmentMsg();
                            }, 200);
                        })
                    } else if (data.elevatorStatus == 3) {
                        if (checkTab == 0) {
                            times = ''
                            operCodes = 2
                        } else if (checkTab == 1) {
                            times = '600'
                        } else if (checkTab == 2) {
                            times = '3600'
                        } else if (checkTab == 3) {
                            times = '86400'
                        } else if (checkTab == 4) {
                            times = '-1'
                        }

                        Dao.updateElevatorCon({
                            dataType: 1,
                            bizIds: bizId,
                            operCode: operCodes,
                            time: times,
                            remark: $('.popup-textarea').val(),
                            userName: userInfor.accountName
                        }, function (res) {
                            app.popup.close('#popup-about');
                            setTimeout(function () {
                                self.getequipmentMsg();
                            }, 200);
                        })
                    }


                })
            },
            //查看视频
            findVedioNum: function (fcfId) {
                var self = this;
                videoData = [];
                Dao.getFcfRelateVideos({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    relateObjType: 1,
                    relateObjId: fcfId,//探测器id
                    account: userInfor.accountName
                }, function (data) {
                    if (data && data.length > 0) {
                        jQuery("#decter-video_" + self.getNewId).attr('href', '');
                        jQuery("#decter-video-num_" + self.getNewId).html(`有` + data.length + `路监控`);
                        if (data.length == 1) {
                            if (videoData[data[0].id] == null) {
                                videoData[data[0].id] = data[0];
                            }
                            jQuery("#decter-video_" + self.getNewId).off().click(function () {
                                var videoBean = {};
                                videoBean.id = data[0].id;
                                videoBean.deviceId = data[0].deviceId;
                                videoBean.type = data[0].type;
                                videoBean.name = data[0].name;
                                videoBean.channel = data[0].channel;
                                videoBean.status = data[0].status;
                                videoBean.picUrl = data[0].picUrl;
                                videoBean.isOnline = data[0].isOnline;
                                videoBean.isConcem = data[0].isConcem == null ? 0 : data[0].isConcem;
                                Dao.getAuthList({
                                    userName: userInfor.accountName,
                                    deviceId: appKeyObj.deviceId,
                                    organizationId: data[0].organizationId,
                                    equiptType: videoBean.type,
                                    orgCode: userInfor.org.orgCode,
                                    authId: data[0].authId
                                }, function (data) {
                                    var videoKeyBean = data[0];
                                    native.openVideo(JSON.stringify(videoKeyBean), JSON.stringify(videoBean));
                                }, function (e) { }, true);
                            });
                        } else {
                            jQuery("#decter-video_" + self.getNewId).attr('href', '/comvdList/' + fcfId + '/');
                        }
                    } else {
                        jQuery("#decter-video-num_" + self.getNewId).html("无");
                        jQuery("#decter-video_" + self.getNewId).attr('href', '');
                    }
                });
            },
            //24小时状态变化 有模拟量
            drawHasAnalogHistoryChart: function (fcfId) {
                var self = this;
                var yDataValue = [];
                var yData = [];
                var yMax = null;
                Dao.getAnalogObjectDtos({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    fcfId: fcfId
                }, function (data) {
                    var noDataFlag = false;//判断是否有模拟量数据
                    if (data && data.length > 0) {
                        //处理模拟量类型数据  设备电压不画
                        if (data.length == 1 && data[0].dataTypeId == 3) {
                            $("#historyChart-waper_" + self.getNewId).hide();
                        }
                        for (var i = 0; i < data.length; i++) {
                            yDataValue = [];
                            yData = [];
                            if (data[i].dataTypeId != 3) {
                                if (data[i].detail && data[i].detail.length > 0) {
                                    noDataFlag = true;
                                    let dataTime = data[i].detail;
                                    for (var n = 0; n < dataTime.length; n++) {
                                        yDataValue.push(dataTime[n].analogValue);
                                        yData.push({ "name": dataTime[n].datetime, "value": [moment(dataTime[n].datetime).format("YYYY-MM-DD HH:mm"), dataTime[n].analogValue] });
                                    }
                                    $("#historyChart-waper_" + self.getNewId).append(`
                                    <div class="every-type-chart-wrap" style="padding:20px">
                                        <p class="chat-title" >`+ data[i].dataTypeName + `变化（` + data[i].detail[0].analogUnits + `）</p>
                                        <div class="every-type-chart decterHasAnalogChart-style" id="historyChart-bar-`+ (data[i].dataTypeId + `_` + self.getNewId) + `">

                                        </div>
                                    </div>
                                `);
                                    //y轴最大值
                                    yMax = Math.max(...yDataValue);
                                    yMax = Math.max(yMax, data[i].thresholdMax ? data[i].thresholdMax : 0);

                                    self.drawEqChartEqmentMsg(yDataValue, yData, yMax, data[i].thresholdMin, data[i].thresholdMax, data[i].dataTypeName, "historyChart-bar-" + data[i].dataTypeId + "_" + self.getNewId, data[i].detail[0].analogUnits);
                                }
                                //实时图表--展示模拟量最后一条
                                self.drawTopChartOrPic(data);
                            }
                        }
                    } else {
                        noDataFlag = false;
                        $("#historyChart-waper_" + self.getNewId).html(`<img src="` + listNoDataPic() + `" />`);
                    }
                    if (!noDataFlag) {
                        $("#historyChart-waper_" + self.getNewId).html(`<img src="` + listNoDataPic() + `" />`);
                    }
                    common.loading(0);
                });
            },
            //展示模拟量最后一条
            drawTopChartOrPic: function (data) {
                var self = this;
                jQuery("#eqmentMsgStatus_" + self.getNewId).html(`
            <div class="every-type-chart-wrap" id="topChartContain_`+ self.getNewId + `"></div>
            <table class="decter-table-content" id="decter-table-content_`+ self.getNewId + `">
                <thead>
                    <tr style="color: #999;"><td>类型</td><td>A相</td><td>B相</td><td>C相</td></tr>
                </thead>
                <tbody>
                    <tr >
                        <td>温度</td>
                        <td id="hot-dataA_`+ self.getNewId + `">-</td>
                        <td id="hot-dataB_`+ self.getNewId + `">-</td>
                        <td id="hot-dataC_`+ self.getNewId + `">-</td>
                    </tr>
                    <tr id="electricity-data_`+ self.getNewId + `">
                        <td>电流</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                    <tr id="voltage-data_`+ self.getNewId + `">
                        <td>电压</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                     </tr>
                </tbody>
            </table>`);
                if (data && data.length > 0) {
                    $("#electricity-data_" + self.getNewId).hide();
                    $("#voltage-data_" + self.getNewId).hide();
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].detail && data[i].detail.length > 0) {
                            if (typeof (data[i].waterArea) === "undefined") {
                                waterArea = " ";
                            } else {
                                waterArea = data[i].waterArea;
                            }
                            self.showRealTimeMes(data[i].dataTypeId, data[i].dataTypeName, data[i].detail, data[i].thresholdMin, data[i].thresholdMax, waterArea);
                        }
                        //温度A
                        if (data[i].dataTypeId == 36) {
                            if (data[i].detail && data[i].detail.length > 0) {
                                $("#hot-dataA_" + self.getNewId).html(data[i].detail[data[i].detail.length - 1].analogValue)
                            }
                        }
                        //温度B
                        if (data[i].dataTypeId == 37) {
                            if (data[i].detail && data[i].detail.length > 0) {
                                $("#hot-dataB_" + self.getNewId).html(data[i].detail[data[i].detail.length - 1].analogValue)
                            }
                        }
                        //温度C
                        if (data[i].dataTypeId == 38) {
                            if (data[i].detail && data[i].detail.length > 0) {
                                $("#hot-dataC_" + self.getNewId).html(data[i].detail[data[i].detail.length - 1].analogValue)
                            }
                        }
                        if (data[i].dataTypeId == 33) {
                            if (data[i].detail && data[i].detail.length > 0) {
                                $("#electricity-data_" + self.getNewId).show();
                            }
                        }
                        if (data[i].dataTypeId == 30) {
                            if (data[i].detail && data[i].detail.length > 0) {
                                $("#voltage-data_" + self.getNewId).show();
                            }
                        }
                    }
                } else {
                    $("#topChartContain_" + self.getNewId).html(`<img src="` + listNoDataPic() + `" />`);
                }
            },
            //视频分析 && 不是模拟量
            showVedioAnalysisAndnoAlong: function (data) {
                var self = this;
                jQuery("#eqmentMsgStatus_" + self.getNewId).html(`
                <div class="every-type-chart-wrap" id="topChartContain_`+ self.getNewId + `"></div>`);
                if (data.isVideoAnalysis == 1) {
                    if(data.recordsInfo){
                        this.handleDrawImage(data.recordsInfo)
                    }
                } else {
                    var statusAlias = data.statusAlias;
                    if (!statusAlias) {
                        statusAlias = transFireToText(data.fireTType);
                    }
                    $("#topChartContain_" + self.getNewId).html(`
                <div class="no-hasAnalog">
                    <div class="no-hasAnalog-left">
                        <img src="` + picDecterNo(JSON.parse(data.icon).detailIcon) + `" />
                    </div>
                    <div class="no-hasAnalog-right">
                        <p class="no-hasAnalog-typeText" style="color:`+ transFireColor(data.fireTType) + `">
                        ` + statusAlias + `</p>
                        <span class="no-hasAnalog-type">当前状态</span>
                    </div>
                </div>`);
                }
            },
            // 视频分析图片展示
            handleDrawImage(dataDetail) {
                var self = this;
                self.detailValie = {
                    picAlarmRegion: dataDetail.picAlarmRegion,
                    picResetRegion: dataDetail.picResetRegion,
                };
                // 轮播图
                $("#topChartContain_" + self.getNewId).html(`
                <div id="hiddenCheck-swiper_${self.getNewId}" class="swiper-container">
                    <div class="swiper-wrapper" id="hiddenCheck_swiper_${self.getNewId}"></div>
                    <div class="swiper-pagination" id="hiddenCheck_pagination_${self.getNewId}"></div>
                </div>`);
                if (dataDetail.picturesUrls) {
                    $("#hiddenCheck_swiper_" + self.getNewId).empty();
                    // 报警复位图片都存在时创建swiper
                    if (dataDetail.resetPicturesUrls) {
                        var hiddenCheck_swiper = new Swiper('#hiddenCheck-swiper_' + self.getNewId, {
                            direction: 'horizontal',
                            loop: false,
                            slidesPerView: "auto",
                            pagination: {
                                el: '#hiddenCheck_pagination_' + self.getNewId,
                            },
                        });
                    }
                    var swiper = app.swiper.get('#hiddenCheck-swiper_' + self.getNewId);
                    // 报警图片
                    let resultRegionAlarm = dataDetail.picAlarmRegion; // picResetRegion（复位）    picAlarmRegion（报警）
                    if (resultRegionAlarm) {
                        resultRegionAlarm = JSON.parse(resultRegionAlarm);
                        let frameArr = {}
                        frameArr = resultRegionAlarm.imageInfo;
                        $("#hiddenCheck_swiper_" + self.getNewId).append(`
                        <div class="swiper-slide" style="text-align: center;">
                            <div id="show-vedio-btn_`+ self.getNewId + `" class="show-vedio-btn" style="z-index: 999">查看监控</div>
                            <img id="imagetoAlarm" src="` + picVedioNo(frameArr.pic + "?imageView2/2/w/95%/h/180/q/25") + `" style="width:95%;height:180px;z-index: 9;" onload="vanimageLoad()" class="lazy lazy-fade-in" crossOrigin="Anonymous"/>
                            <canvas style="visibility: hidden !important;width:95%;height:180px;position: absolute;left:8px"  id="policeHistoryDetail_scaleImg_"/>
                        </div>`);
                        swiper&&swiper.update(true); // 更新滑块
                    }
                    // 复位图片
                    let resultRegionReset = dataDetail.picResetRegion; // picResetRegion（复位）    picAlarmRegion（报警）
                    if (resultRegionReset) {
                        resultRegionReset = JSON.parse(resultRegionReset);
                        let frameArr = {}
                        frameArr = resultRegionReset.imageInfo;
                        $("#hiddenCheck_swiper_" + self.getNewId).append(`
                        <div class="swiper-slide" style="text-align: center;">
                            <div id="show-vedio-btn_two_`+ self.getNewId + `" class="show-vedio-btn" style="z-index: 999">查看监控</div>
                            <img id="imagetoReset" src="` + picVedioNo(frameArr.pic + "?imageView2/2/w/95%/h/180/q/25") + `" style="width:95%;height:180px;z-index: 9;" onload="vanimageLoadReset()" class="lazy lazy-fade-in" crossOrigin="Anonymous"/>
                            <canvas style="visibility: hidden !important;width:95%;height:180px;background-color:transparent;position: absolute;left:8px"  id="policeHistoryDetail_scaleImgReset_"/>
                        </div>`);
                        swiper&&swiper.update(true); // 更新滑块
                    }
                    common.loading(1);
                } else {
                    $("#topChartContain_" + self.getNewId).empty();
                    common.loading(0);
                }
                //放大图片 在这里吧canvas转图片，然后塞给图片预览
                jQuery("#hiddenCheck_swiper_" + self.getNewId+" #imagetoAlarm").bind("click", function () {
                    let imgpic = []
                    // 有报警
                    imgpic.push({ url: self.image_A })
                    // 有复位
                    if (dataDetail.resetPicturesUrls) {
                        imgpic.push({ url: self.image_R })
                    }
                    if (self.image_A) {
                        if (dataDetail.resetPicturesUrls) {
                            if (self.image_R) {
                                openAndShowBigImage(imgpic, 0);
                            } else {
                                app.methods.showToastCenter("图像生成中...");
                            }
                        } else {
                            openAndShowBigImage(imgpic, 0);
                        }
                    } else {
                        app.methods.showToastCenter("图像生成中...");
                    }
                });
                //放大图片 在这里吧canvas转图片，然后塞给图片预览
                jQuery("#imagetoReset").bind("click", function () {
                    if (self.image_A&& self.image_R) {
                        openAndShowBigImage([{ url: self.image_A }, { url: self.image_R }], 1);
                    } else {
                        app.methods.showToastCenter("图像生成中...");
                    }
                });

                // 查看监控按钮
                jQuery("#show-vedio-btn_" + self.getNewId).off().on('click', {
                    'data': dataDetail
                }, function (event) {
                    // console.log('按钮没问题')
                    var data = event.data.data.videoList;
                    videoData = [];
                    Dao.getFcfRelateVideos({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        relateObjType: 1,
                        relateObjId: self.id * 1,
                        account: userInfor.accountName,
                    }, function (data) {
                        if (data != null && data.length > 0) {
                            if (videoData[data[0].id] == null) {
                                videoData[data[0].id] = data[0];
                            }
                            self.videoBean.id = data[0].id;
                            self.videoBean.deviceId = data[0].deviceId;
                            self.videoBean.type = data[0].type;
                            self.videoBean.name = data[0].name;
                            self.videoBean.channel = data[0].channel;
                            self.videoBean.status = data[0].status;
                            self.videoBean.picUrl = data[0].picUrl;
                            self.videoBean.isOnline = data[0].isOnline;
                            self.videoBean.region = data[0].region;
                            self.videoBean.organizationId = data[0].organizationId;
                            self.videoBean.isConcem = data[0].isConcem == null ? 0 : data[0].isConcem;
                            Dao.getAuthList({
                                userName: userInfor.accountName,
                                deviceId: appKeyObj.deviceId,
                                organizationId: data[0].organizationId,
                                equiptType: data[0].type,
                                orgCode: userInfor.org.orgCode,
                                authId: data[0].authId
                            }, function (data) {
                                common.loading(0);
                                var videoKeyBean = data[0];
                                native.openVideo(JSON.stringify(videoKeyBean), JSON.stringify(self.videoBean));
                            });
                        } else {
                            app.methods.showToastCenter("暂无播放此视频权限");
                        }
                    });
                });
                // 查看监控按钮
                jQuery("#show-vedio-btn_two_" + self.getNewId).off().on('click', {
                    'data': dataDetail
                }, function (event) {
                    console.log('按钮没问题')
                    var data = event.data.data.videoList;
                    videoData = [];
                    Dao.getFcfRelateVideos({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        relateObjType: 1,
                        relateObjId: self.id * 1,
                        account: userInfor.accountName,
                    }, function (data) {
                        if (data != null && data.length > 0) {
                            if (videoData[data[0].id] == null) {
                                videoData[data[0].id] = data[0];
                            }
                            self.videoBean.id = data[0].id;
                            self.videoBean.deviceId = data[0].deviceId;
                            self.videoBean.type = data[0].type;
                            self.videoBean.name = data[0].name;
                            self.videoBean.channel = data[0].channel;
                            self.videoBean.status = data[0].status;
                            self.videoBean.picUrl = data[0].picUrl;
                            self.videoBean.isOnline = data[0].isOnline;
                            self.videoBean.region = data[0].region;
                            self.videoBean.organizationId = data[0].organizationId;
                            self.videoBean.isConcem = data[0].isConcem == null ? 0 : data[0].isConcem;
                            Dao.getAuthList({
                                userName: userInfor.accountName,
                                deviceId: appKeyObj.deviceId,
                                organizationId: data[0].organizationId,
                                equiptType: data[0].type,
                                orgCode: userInfor.org.orgCode,
                                authId: data[0].authId
                            }, function (data) {
                                common.loading(0);
                                var videoKeyBean = data[0];
                                native.openVideo(JSON.stringify(videoKeyBean), JSON.stringify(self.videoBean));
                            });
                        } else {
                            app.methods.showToastCenter("暂无播放此视频权限");
                        }
                    });
                });
            },
            //展示实时图表
            showRealTimeMes: function (dataTypeId, dataTypeName, data, thresholdMin, thresholdMax, waterArea) {
                var self = this;
                var color = "#77be07";
                var min = 0;
                var max = 2.5;
                var splitNumber = 5;
                var currentIdName = hasAnalogTypeArr[dataTypeId] || dataTypeName;
                var currentIdData = data[data.length - 1];
                var currentAnalogUnits = data[data.length - 1].analogUnits;
                var currentAnalogValue = data[data.length - 1].analogValue;
                thresholdMin = typeof (thresholdMin) == 'undefined' ? -Infinity : thresholdMin
                thresholdMax = typeof (thresholdMax) == 'undefined' ? Infinity : thresholdMax
                if (currentAnalogValue >= thresholdMin && currentAnalogValue <= thresholdMax) {
                    color = "#77be07";  //正常
                } else {
                    color = "#fe6668";
                }

                waterVolume = common.mul(waterArea, currentAnalogValue);
                if (waterArea === "undefined" || waterArea === " " || waterArea === null) {
                    _htmlwaterArea = ``;
                } else {
                    _htmlwaterArea = `<em class="water-volume" style="color:` + color + `">计` + waterVolume + `m³</em>`;
                }
                if (dataTypeId != 3) {
                    //液位-水箱
                    if (dataTypeId == 2) {
                        $("#topChartContain_" + self.getNewId).append(`
                        <div class="every-type-chart-wrap">
                            <div class="every-type-chart decterHasAnalogChart-style" id="decterHasAnalogChart_`+ self.getNewId + `"></div>
                            <div class="right-num">
                                `+ _htmlwaterArea + `
                                <span style="color:`+ color + `">` + currentAnalogValue + `</span>
                                <p>当前`+ currentIdName + (currentAnalogUnits ? (`（` + currentAnalogUnits + `）`) : '') + `</p>
                            </div>
                        </div>
                    `);
                        self.drawWaterChart((thresholdMax - currentAnalogValue), currentAnalogValue);
                    }
                    //码表
                    else {
                        //是组合式电气火灾探测器
                        if (self.dataTypeIdArr.find((n) => n == dataTypeId)) {
                            jQuery("#topChartContain_" + self.getNewId).hide();
                            jQuery("#decter-table-content_" + self.getNewId).show();
                            jQuery("#decterMes_" + dataTypeId).html(`<span style="color:` + color + `">` + currentAnalogValue + currentAnalogUnits + `</span>`);
                            if (dataTypeId == 39) {//剩余电流码表
                                jQuery("#topChartContain_" + self.getNewId).show();
                                jQuery("#topChartContain_" + self.getNewId).append(`
                                <div class="every-type-chart-wrap">
                                    <div class="decterHasAnalogChart-style" id="hasAnalogChart-clock-`+ dataTypeId + `_` + self.getNewId + `"></div>
                                    <div class="right-num">
                                        <span style="color:`+ color + `">` + currentAnalogValue + `</span>
                                        <p>当前剩余电流`+ `（` + currentAnalogUnits + `）</p>
                                    </div>
                                </div>`);
                                self.drawHalfClockChart(dataTypeId, currentAnalogValue, currentAnalogUnits, 0, 1000, 5);
                            }
                        } else {
                            jQuery("#topChartContain_" + self.getNewId).show();
                            jQuery("#topChartContain_" + self.getNewId).append(`
                        <div class="every-type-chart-wrap">
                            <div class="decterHasAnalogChart-style" id="hasAnalogChart-clock-`+ dataTypeId + `_` + self.getNewId + `"></div>
                            <div class="right-num">
                                <span style="color:`+ color + `">` + currentAnalogValue + `</span>
                                <p>当前`+ currentIdName + (currentAnalogUnits ? (`（` + currentAnalogUnits + `）`) : '') + `</p>
                            </div>
                        </div>`);
                            //压力
                            if (dataTypeId == 1) {
                                max = 2.5;
                                self.drawClockChart(dataTypeId, currentAnalogValue, currentAnalogUnits, min, max, splitNumber);
                            }
                            //湿度
                            else if (dataTypeId == 6) {
                                splitNumber = 10;
                                max = 100;
                                self.drawClockChart(dataTypeId, currentAnalogValue, currentAnalogUnits, min, max, splitNumber);
                            }
                            //温度
                            else if (dataTypeId == 5) {
                                self.drawTempClockChart(dataTypeId, currentAnalogValue, currentAnalogUnits, thresholdMin, thresholdMax);
                            } else {
                                //电压
                                if (dataTypeId == 7 || dataTypeId == 8 || dataTypeId == 9) {
                                    max = 450;
                                    splitNumber = 3;
                                }
                                //电流
                                else if (dataTypeId == 10 || dataTypeId == 11 || dataTypeId == 12) {
                                    max = 100;
                                    splitNumber = 5;
                                }//信号强度
                                else if (dataTypeId == 41) {
                                    min = -110
                                    max = 100
                                }
                                self.drawHalfClockChart(dataTypeId, currentAnalogValue, currentAnalogUnits, min, max, splitNumber);
                            }
                        }
                    }
                }
            },
            //24小时状态变化图表---没有模拟量
            drawNoAnalogChart: function (fcfId) {
                var self = this;
                var xData = [];
                var yData = [];
                Dao.getFacsHisStatus({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    fcfId: fcfId
                }, function (data) {
                    if (data && data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var date = data[i].date.toString().slice(8, 10) + ":00";
                            xData.push(date);
                            var y = data[i].fireTType;
                            if (y == 0 || !y) {
                                y = 5;
                            } else if (y == 10) {
                                y = 25;
                            } else if (y == 20) {
                                y = 20;
                            } else if (y == 30) {
                                y = 15;
                            } else if (y == 40) {
                                y = 10;
                            } else {
                                y = 5;
                            }
                            yData.push(y);
                        }
                        self.hoursChangeChart(xData, yData);
                    } else {
                        $("#historyChartNoData-waper_" + self.getNewId).html(`<img src="` + listNoDataPic() + `" />`);
                    }
                }, false);
            },
            //echart画水箱
            drawWaterChart: function (top, bottom) {
                var self = this;
                var id = "decterHasAnalogChart_" + self.getNewId;
                var waterChart = echarts.init(document.getElementById(id));
                var option = {
                    title: null,
                    tooltip: {},
                    xAxis3D: {
                        type: 'category',
                        data: ['']
                    },
                    yAxis3D: {
                        type: 'category',
                        data: ['']
                    },
                    zAxis3D: {
                        type: 'value'
                    },
                    grid3D: {
                        show: false, //是否显示三维迪卡尔坐标
                        boxWidth: 80,
                        boxDepth: 20,
                        axisPointer: {
                            show: false
                        },
                        viewControl: {
                            alpha: 15, //视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
                            beta: 60 //视角绕 y 轴，即左右旋转的角度
                        },
                        top: "-5%", //组件的视图离容器上侧的距离
                        left: "-25%",
                        bottom: "-10%"
                    },
                    series: [{
                        type: 'bar3D',
                        barSize: 75,
                        data: [
                            [0, 0, bottom]
                        ],
                        stack: 'stack',
                        shading: 'lambert',
                        itemStyle: { //柱条样式
                            color: '#428ceb',
                            opacity: 0.9
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    }, {
                        type: 'bar3D',
                        barSize: 75,
                        data: [
                            [0, 0, top]
                        ],
                        stack: 'stack',
                        shading: 'lambert',
                        itemStyle: { //柱条样式
                            color: '#428ceb',
                            opacity: 0.5
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    }]
                }
                waterChart.setOption(option);
            },
            //码表-压力-湿度
            drawClockChart: function (dataTypeId, currentAnalogValue, currentAnalogUnits, min, max, splitNumber) {
                var self = this;
                var _score = currentAnalogValue;
                var myChart_safetyIndex = echarts.init(document.getElementById("hasAnalogChart-clock-" + dataTypeId + "_" + self.getNewId));
                var option_safetyIndex = {
                    tooltip: null,
                    series: [{
                        type: 'gauge',
                        min: min,
                        max: max,
                        radius: "70%",
                        center: ["30%", "52%"],
                        splitNumber: splitNumber,
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 12,
                        },
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#000']
                                ],
                                shadowBlur: 2,
                                width: 8,
                                shadowColor: '#000', //默认透明
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 5,
                            length: 14,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        splitLine: { //分割线样式（及10、20等长线样式）
                            length: 18,
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        pointer: {
                            length: '60%',
                            width: '3',
                        },
                        detail: {
                            formatter: currentAnalogUnits,
                            textStyle: {
                                fontSize: 12
                            },
                            offsetCenter: [0, "65%"],
                        },
                        data: [{
                            value: _score,
                            name: '',
                        }]
                    }]
                };
                if (option_safetyIndex && typeof option_safetyIndex === "object") {
                    myChart_safetyIndex.setOption(option_safetyIndex, true);
                }
            },
            //码表-温度
            drawTempClockChart: function (dataTypeId, currentAnalogValue, currentAnalogUnits, thresholdMin, thresholdMax) {
                var self = this;
                var realNum = -25 - (currentAnalogValue);
                if (realNum <= 0) {
                    realNum = Math.abs(realNum);
                }
                let color_bg = "#999";
                let color_green = "rgba(119,190,7,1)";
                let color_red = "#fe6668";
                let colorArr = [];
                if (currentAnalogValue <= thresholdMax && currentAnalogValue >= thresholdMin) { //被包含
                    colorArr.push([Math.abs(realNum / 125), color_green]);
                    colorArr.push([1, color_bg]);
                } else {
                    colorArr.push([0, color_bg]);
                    colorArr.push([Math.abs(realNum / 125), color_red]);
                    colorArr.push([1, color_bg]);

                }
                colorArr.push([1, color_bg]);
                var myChart_safetyIndex = echarts.init(document.getElementById("hasAnalogChart-clock-" + dataTypeId + "_" + self.getNewId));
                var option_safetyIndex = {
                    series: [{
                        type: 'gauge',
                        min: -25,
                        max: 100,
                        radius: "70%",
                        center: ["30%", "52%"],
                        splitNumber: 5,
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 12,
                        },
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: colorArr,
                                width: 8,
                                // shadowBlur: 2,
                                // shadowColor: '#999', //默认透明
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 5,
                            length: 3,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: '#fff'
                            }
                        },
                        splitLine: { //分割线样式（及10、20等长线样式）
                            length: 6,
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#fff',
                            }
                        },
                        pointer: {
                            length: '60%',
                            width: '3',
                        },
                        detail: {
                            formatter: currentAnalogUnits,
                            textStyle: {
                                fontSize: 12
                            },
                            offsetCenter: [0, "65%"],
                        },
                        data: [{
                            value: currentAnalogValue,
                            name: '',
                        }]
                    }]
                };
                if (option_safetyIndex && typeof option_safetyIndex === "object") {
                    myChart_safetyIndex.setOption(option_safetyIndex, true);
                }
            },
            //码表-ABC相-电气火灾剩余电流传感器
            drawHalfClockChart: function (dataTypeId, currentAnalogValue, currentAnalogUnits, min, max, splitNumber) {
                var self = this;
                var myChart_safetyIndex = echarts.init(document.getElementById("hasAnalogChart-clock-" + dataTypeId + "_" + self.getNewId));
                var option_safetyIndex = {
                    series: [{
                        type: 'gauge',
                        min: min,
                        max: max,
                        radius: "110%",
                        center: ["39%", "75%"],
                        startAngle: 180,
                        endAngle: 90,
                        splitNumber: splitNumber,  //5等分
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 12,
                        },
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#000']
                                ],
                                shadowBlur: 2,
                                width: 8,
                                shadowColor: '#000', //默认透明
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 5,
                            length: 14,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        splitLine: { //分割线样式（及10、20等长线样式）
                            length: 18,
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        pointer: {
                            length: '60%',
                            width: '3',
                        },
                        detail: null,
                        data: [{
                            value: currentAnalogValue,
                            name: '',
                        }]
                    }]
                };
                if (option_safetyIndex && typeof option_safetyIndex === "object") {
                    myChart_safetyIndex.setOption(option_safetyIndex, true);
                }
            },
            //画折线图
            drawEqChartEqmentMsg: function (yDataValue, yAxisData, yMax, thresholdMin, thresholdMax, title, el, analogUnits) {
                var thresholdArr = [];
                if (thresholdMin || thresholdMin == 0) {
                    thresholdArr.push({
                        name: '下限' + thresholdMin,
                        yAxis: thresholdMin ? thresholdMin : 0
                    })
                }
                if (thresholdMax || thresholdMax == 0) {
                    thresholdArr.push({
                        name: '上限' + thresholdMax,
                        yAxis: thresholdMax ? thresholdMax : 0
                    })
                }
                var eqChart = echarts.init(document.getElementById(el));
                eqChart.setOption({
                    title: {
                        text: "",
                    },
                    grid: {
                        top: "10%",
                        left: '3%',
                        right: '5%',
                        bottom: '0',
                        containLabel: true
                    },
                    tooltip: {
                        backgroundColor: 'white',
                        borderColor: 'gray', // 提示边框颜色
                        borderRadius: 4, // 提示边框圆角，单位px，默认为4
                        borderWidth: 1,
                        position: function (p) { //其中p为当前鼠标的位置
                            return [p[0] - 28, p[1] - 70];
                        },
                        padding: 5,
                        trigger: 'axis',
                        formatter: function (e) {
                            var data = e[0];
                            return `<span style='color:gray;font-size:12px;'>` + data.value[0] + `</span>
                                <br/>
                                <span style='color:red;font-size:14px;'>`+ data.value[1] + analogUnits + `</span>`;
                        },
                        textStyle: { align: 'center' },
                        confine: true,
                    },
                    xAxis: [{
                        type: 'time',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(225, 225, 225, 0.3)'
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#666"
                            },
                            formatter: function (params) {
                                return moment(params).format("HH:mm");
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#f4f7f9'
                            }
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        max: yMax,
                        splitNumber: 0.5,
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(225, 225, 225, 0.3)'
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#666"
                            },
                            formatter: function (params) {
                                return "";
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#f4f7f9'
                            }
                        },
                    }],
                    series: [{
                        type: 'line',
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(57, 126, 206, 0.6)' },
                                    { offset: 0.5, color: 'rgba(57, 126, 206, 0.4)' },
                                    { offset: 1, color: '#fff' }
                                ])
                            }
                        },
                        smooth: true,
                        showSymbol: false,  //不展示节点
                        itemStyle: {
                            normal: {
                                color: "rgba(55, 139, 246, 0.8)", // 会设置点和线的颜色，所以需要下面定制
                                borderColor: "rgba(55, 139, 246, 0.8)" // 点边线的颜色
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: "rgba(55, 139, 246,0.9)" // 线条颜色
                            }
                        },
                        data: yAxisData,
                        markLine: {
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        type: 'dashed',
                                        color: '#fe6668',
                                    },
                                    label: {
                                        show: true,
                                        position: 'middle',
                                        formatter: function (params) {
                                            return params.name;
                                        }
                                    }
                                }
                            },
                            silent: false,
                            data: thresholdArr
                        }
                    }]
                });
            },
            //不是模拟量---最近二十四小时状态变化
            hoursChangeChart: function (xData, yData) {
                var self = this;
                //报警
                var fireColr = new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: 'rgba(254, 102, 104, 1)' },
                        { offset: 0.002, color: 'rgba(254, 102, 104, 0.95)' },
                        { offset: 0.03, color: 'rgba(254, 102, 104, 0.15)' },
                        { offset: 0.7, color: 'rgba(254, 102, 104, 0.1)' },
                        { offset: 0.9, color: 'rgba(254, 102, 104, 0.05)' },
                        { offset: 1, color: 'rgba(254, 102, 104, 0.05)' }
                    ]
                );
                //故障
                var faultColr = new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: 'rgba(248, 183, 40, 1)' },
                        { offset: 0.002, color: 'rgba(248, 183, 40, 0.95)' },
                        { offset: 0.03, color: 'rgba(248, 183, 40, 0.15)' },
                        { offset: 0.7, color: 'rgba(248, 183, 40, 0.1)' },
                        { offset: 0.9, color: 'rgba(248, 183, 40, 0.05)' },
                        { offset: 1, color: 'rgba(248, 183, 40, 0.05)' }
                    ]
                );
                //屏蔽
                var shieldColr = new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: 'rgba(153, 153, 153, 1)' },
                        { offset: 0.002, color: 'rgba(153, 153, 153, 0.95)' },
                        { offset: 0.03, color: 'rgba(153, 153, 153, 0.15)' },
                        { offset: 0.7, color: 'rgba(153, 153, 153, 0.1)' },
                        { offset: 0.9, color: 'rgba(153, 153, 153, 0.05)' },
                        { offset: 1, color: 'rgba(153, 153, 153, 0.05)' }
                    ]
                );
                //联动
                var linkColr = new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: 'rgba(55, 139, 246, 1)' },
                        { offset: 0.002, color: 'rgba(55, 139, 246, 0.95)' },
                        { offset: 0.03, color: 'rgba(55, 139, 246, 0.15)' },
                        { offset: 0.7, color: 'rgba(55, 139, 246, 0.1)' },
                        { offset: 0.9, color: 'rgba(55, 139, 246, 0.05)' },
                        { offset: 1, color: 'rgba(55, 139, 246, 0.05)' }
                    ]
                );
                //正常
                var normalColr = new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: 'rgba(119, 190, 7, 1)' },
                        { offset: 0.002, color: 'rgba(119, 190, 7, 0.95)' },
                        { offset: 0.03, color: 'rgba(119, 190, 7, 0.15)' },
                        { offset: 0.7, color: 'rgba(119, 190, 7, 0.1)' },
                        { offset: 0.9, color: 'rgba(119, 190, 7, 0.05)' },
                        { offset: 1, color: 'rgba(119, 190, 7, 0.05)' }
                    ]
                );
                var hourChart = echarts.init(document.getElementById("historyChartNoData-waper_" + self.getNewId));
                hourChart.setOption({
                    title: {
                        text: '',
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (e) {
                            if (e[0].value == 5) {
                                return "<div style='text-align: left;padding-left: 6px;'>" + e[0].name + "</div><div style='padding-left: 6px;'>状态：正常</div>";
                            }
                            else if (e[0].value == 10) {
                                return "<div style='text-align: left;padding-left: 6px;'>" + e[0].name + "</div><div style='padding-left: 6px;'>状态：联动</div>";
                            }
                            else if (e[0].value == 15) {
                                return "<div style='text-align: left;padding-left: 6px;'>" + e[0].name + "</div><div style='padding-left: 6px;'>状态：屏蔽</div>";
                            }
                            else if (e[0].value == 20) {
                                return "<div style='text-align: left;padding-left: 6px;'>" + e[0].name + "</div><div style='padding-left: 6px;'>状态：故障</div>";
                            }
                            else if (e[0].value == 25) {
                                return "<div style='text-align: left;padding-left: 6px;'>" + e[0].name + "</div><div style='padding-left: 6px;'>状态：报警</div>";
                            }
                        }
                    },
                    grid: {
                        top: "12%",
                        left: '5%',
                        right: '4%',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: "dotted",
                                    color: 'rgba(225, 225, 225, 0.3)'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(225, 225, 225, 0.3)'
                                },
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#666"
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            interval: 5,
                            max: 25,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(225, 225, 225, 0.3)'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(225, 225, 225, 0.3)'
                                },
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#666"
                                },
                                formatter: function (value) {
                                    if (value == 5) {
                                        return "正常";
                                    }
                                    else if (value == 10) {
                                        return "联动";
                                    }
                                    else if (value == 15) {
                                        return "屏蔽";
                                    }
                                    else if (value == 20) {
                                        return "故障";
                                    }
                                    else if (value == 25) {
                                        return "报警";
                                    } else {
                                        return "";
                                    }
                                },
                            },
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            // barWidth:"100%",
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        if (params.value == 5) {
                                            return normalColr;
                                        } else if (params.value == 10) {
                                            return linkColr;
                                        } else if (params.value == 15) {
                                            return shieldColr;
                                        } else if (params.value == 20) {
                                            return faultColr;
                                        } else if (params.value == 25) {
                                            return fireColr;
                                        }
                                    }
                                },
                            },
                            data: yData
                        }
                    ]
                });
            },
            backToPrePage: function () {
                // app.methods.freshEqment();
                // app.methods.backToTab();
            },
            forbidden: function () {
                // console.log('禁用')
            },
            backPageRouter: function () {
                // this.getequipmentMsg()
                app.methods.backToTab();
            },
            openConfirm: function () {
                var self = this;
                if (self.isConcern == 1) { // 取消关注
                    app.params.dialog.buttonCancel = "取消";
                    app.params.dialog.buttonOk = "确认";
                    // app.dialog.confirm('确认取消关注此设备?', '确认', function() {
                    //取消关注
                    common.loading(1);
                    Dao.focusOnOff({
                        userAccount: userInfor.accountName,
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        type: 1,
                        concemId: self.id,
                    }, function (data) {
                        common.loading(0);
                        $("#noAttention_" + self.getNewId).css("color", "#333333");
                        $("#attention_" + self.getNewId).hide();
                        $("#noAttention_" + self.getNewId).show();
                        let alarming = JSON.parse(localStorage.getItem("equipment_material"))
                        alarming.isConcern = 0
                        localStorage.setItem("equipment_material", JSON.stringify(alarming))
                        app.methods.showToastCenter("取消关注成功");
                        self.isConcern = 0;
                        app.methods.refreshMineFocus();
                    }, function (e) {
                        common.loading(0);
                        app.methods.showToastCenter("取消关注失败");
                    });
                    // });
                } else {
                    common.loading(1);
                    Dao.addUserConcem({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        userAccount: userInfor.accountName,
                        type: 1,
                        concemId: self.id,
                    }, function (data) {
                        common.loading(0);
                        $("#attention_" + self.getNewId).css("color", "red");
                        $("#noAttention_" + self.getNewId).hide();
                        $("#attention_" + self.getNewId).show();
                        let alarming = JSON.parse(localStorage.getItem("equipment_material"))
                        alarming.isConcern = 1
                        localStorage.setItem("equipment_material", JSON.stringify(alarming))
                        app.methods.showToastCenter("关注成功");
                        app.methods.refreshMineFocus();
                        self.isConcern = 1;
                    }, function (e) {
                        common.loading(0);
                        app.methods.showToastCenter("关注失败");
                    });
                }
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                common.loading(1);
                jQuery('#revise_' + self.getNewId).hide()
                jQuery('.forbidden').hide()
                jQuery('.showMid').hide()
                setTimeout(function () {
                    self.getequipmentMsg();
                }, 1000);
                window.vanimageLoad = self.vanimageLoad;
                window.vanimageLoadReset = self.vanimageLoadReset;
                window.ResetImgClick = self.ResetImgClick;
                window.ImgClick = self.ImgClick;
            },
        }
    }
</script>